<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .welcome h2{
        line-height:41px;
        color: #ccc;
        display: block;
        float: right;
        padding-left: 23px;
    }
    .welcome h1{
        float: right;
        text-align: center;
        color: red;
        line-height: 35px;
        padding-left: 29px;
    }
    .big{
        padding-left: 0 !important;
        line-height: 74px;
    }
    body {
        overflow-y:hidden;
        overflow-x: hidden;
      }
      .line{
        height: 1px;
        border: 1px solid green;
        clear: both;
    }
    .left{
        float: left;
        clear: both;
        height:1000px;
        background: aqua;
        margin-top: -10px;
    }
    .left tr td{
        width: 280px;
    }
    .left tr td a{
        text-decoration: none;
        color: honeydew;
    }
    .right{
        float: left;
    }
    .right ul{
        padding: 0;
        margin-top: -10px;
        margin-left: -96px;
        position: relative;
    }
    .right ul li{
    
        display: block;
        list-style: none;
    }
    .fie{
       resize: none;
       width: 800px;
       outline: none;
       height: 117px; 
       outline: none !important;
    }
    .container{
        margin: 0px !important;
        padding: 0px !important;
    }
    .btn1{
        margin-left: -59px;
        margin-top: -29px;
        outline: none !important;
}
.fies2{
        resize: none;
        position: relative;
        outline: none;
        width: 750px;
    
}
    .goSend{
        position: relative;
        top: -19px;
        height: 45px;
}
    
 .pic{
    margin-top: -37px;
    margin-left: 690px;
 }   
.list{
    margin-left: -39px;
}
.list li{
    float:left !important;
    display: inline-block;
   
} 
.last p{
    display: inline-block;
    margin-left: 5px;
    background-color: aquamarine;
    font-size: 20px;
    line-height: 38px;
}   

  
</style>
<script src="../public/jquery3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<body>
    <div>
        <div class="row">
            <% if(userss){ %>
                <span class="col-md-4" style="text-align:right;font-size: 33px;">欢迎<%= userss %>登陆</span>
                <span class="last"><p onclick="logout(this)">退出登陆</p><p onclick="destroy(this)">注销</p></span>  
           <% }else{ %>
                <span class="col-md-4" style="text-align: right; font-size: 33px;"><button class="btn btn-info" onclick="loginL(this)">请先登陆</button> </span> 
           <% } %>
           
            <p class="line"></p>
    </div>
        <div class="left">
           <table class="table">
                <tr >
                    <td class="btn btn-info release">发布文章</td>
                </tr>
                <tr>
                    <td class="btn btn-info talkChat">聊天交流室</td>
                </tr>
                <tr>
                    <td class="btn btn-info"><a href="http://wpa.qq.com/msgrd?v=3&uin=169308294&site=qq&menu=yes">联系作者</a></td>
                </tr>
                <tr >
                    <td class="btn btn-info"><a href="https://mp.csdn.net/console/article?spm=1000.2115.3001.5448">个人CSDN</a></td>
                </tr>
            </table>       
    </div>

<div style="float: left;">
    <span><ul class="list">

    </ul>
</span>
    <table class="container">
        <tr class="pre">
            <td>
                <textarea name="description" style="resize:none;" class="fie" name="fie" placeholder="请输入发布内容"></textarea>
                <button class="btn1 btn btn-info">发布</button>
            </td>
        </tr>
        
        <!-- <tr>
            <td>
                <textarea name="description" style="resize:none;" class="fie" name="fie" placeholder="请输入发布内容"></textarea>
                <div class="pic">
                    <img src="../public/img/dian.png" alt="点赞">
                    <img src="../public/img/ping.png" alt="品论">
                    <img src="../public/img/del.png" alt="删除">
                </div>
                <textarea name="des" style="resize:none;" class="fies2"></textarea>
                <button onclick="sendping" class="goSend">发送</button>
            </td>
            <td>
                <div style="width: 300px; height: 200px; border: 1px solid red;">
                    
                </div>
            </td>
        </tr> -->
    </table>
</div>


       
</div> 
  
</body>
<script>
//退出登陆
function logout(){
   $.ajax({
       url:"http://192.168.1.7:8989/logout",
       method:"get",
       success:function(res){
        if(res){
           location.href="http://192.168.1.7:8989/chat";
        }
       }
   })
}
////注销
function destroy(){
    $.ajax({
        url:"http://192.168.1.7:8989/destro",
        method:"get",
        success:function(res){
            if(res.result.n==1){
                alert("已经注销");
                location.href="http://192.168.1.7:8989/resiger";
                
            }
        }
    })
}
//////
function loginL(){
    location.href="http://192.168.1.7:8989/login"
}

//点击发布文章
$(".release").click(function(){
    $(".pre").toggle();
})
//获取页面
$.ajax({
    url:"http://192.168.1.7:8989/daes",
    method:"get",
   success:function(res){
        lis(res);
        for(let i=1;i<=2;i++){
            var tag=$(`<tr><tr>`);
                    tag.html(`
                        <td>
                            <textarea name="description" style="resize:none;" class="fie" name="fie" placeholder="请输入发布内容" readonly="readonly">${res[i].fie}</textarea>
                            <div class="pic">
                            <img src="../public/img/dian1.png" alt="点赞" onclick="give(this)">
                            <img src="../public/img/ping.png" alt="品论" onclick="commit(this)">
                            <img src="../public/img/del.png" alt="删除" onclick="drop(this)">
                            <span style="display:none;">${res[i]._id}</span>
                            </div>
                            <textarea name="des" style="resize:none; display:none" class="fies2"></textarea>
                            <button onclick="sendping(this)" class="goSend" style="display:none">发送</button>
                        </td>
                        <td>
                            <div style="width: 300px; height: 200px; border: 1px solid red; display:none">
                                <ul>
                                   
                                </ul>
                            </div>
                         
                `)
               tag.eq(1).insertAfter($(".pre")); 
    }
      
    }
})
//显示页面 1  2 3 
function lis(lis){
    for(let i=1;i<=Math.ceil(lis.length/2);i++){
           var tag=$(`<li class="btn btn-info" onclick="pages(this)"></li>`);
           tag.html(`${i}`);
           $(".list").append(tag);
       }
}

//点赞
function give(aa){
if($(aa).attr("src")=="../public/img/dian1.png"){
    $(aa).attr("src","../public/img/dian.png")
}else{
    $(aa).attr("src","../public/img/dian1.png")
  }
}
//删除
function drop(aa){
   
    $.ajax({
        url:"http://192.168.1.7:8989/dels",
        method:"get",
        data:{
             _id:$(aa).next().html().trim()
        },
        success:function(res){
           if(res.result.n==1){
            $(aa).parent().parent().parent().remove();
          
          
           }
           
        }
    })
}

   //添加 
   $(".btn1").click(function(){
       $.ajax({
           url:"http://192.168.1.7:8989/mainChat",
           method:"get",
           data:{
            fie:$(".fie").val(),
           },
           success:function(res){
               if(res.ops[0].fie==""){
                    alert("请输入内容后发布")
               }else{
                    var tags=$("<tr><tr>");
                    tags.html(`
                        <td>
                            <textarea name="description" style="resize:none;" class="fie" name="fie" placeholder="请输入发布内容" readonly="readonly">${res.ops[0].fie}</textarea>
                            <div class="pic">
                            <img src="../public/img/dian1.png" alt="点赞" onclick="give(this)">
                            <img src="../public/img/ping.png" alt="品论" onclick="commit(this)">
                            <img src="../public/img/del.png" alt="删除" onclick="drop(this)">
                            <span style="display:none;">${res.ops[0]._id}</span>
                            </div>
                            <textarea name="des" style="resize:none;display:none" class="fies2;" ></textarea>
                            <button onclick="sendping(this)" class="goSend" style="display:none">发送</button>
                        </td>
                        <td>
                            <div style="width: 300px; height: 200px; border: 1px solid red;display:none">
                                <ul>
                                    
                                </ul>
                            </div>
                `)
               tags.eq(1).insertAfter($(".pre"));
            }

          }  
       })
    })


//点击分页
function pages(asd){
   
    $.ajax({
        url:"http://192.168.1.7:8989/daea",
        method:"get",
        data:{
            num:$(asd).html(),
        },
        success:function(res){
            
            $(".container tr:not(.pre)").html("");
            for(let i=0;i<res.length;i++){
                var tag=$("<tr><tr>");
                    tag.html(`
                        <td>
                            <textarea name="description" style="resize:none;" class="fie" name="fie" placeholder="请输入发布内容" readonly="readonly">${res[i].fie}</textarea>
                            <div class="pic">
                            <img src="../public/img/dian1.png" alt="点赞" onclick="give(this)">
                            <img src="../public/img/ping.png" alt="品论" onclick="commit(this)">
                            <img src="../public/img/del.png" alt="删除" onclick="drop(this)">
                            <span style="display:none;">${res[i]._id}</span>
                            </div>
                            <textarea name="des" style="resize:none; display:none" class="fies2"></textarea>
                            <button onclick="sendping(this)" class="goSend" style="display:none">发送</button>
                        </td>
                        <td>
                            <div style="width: 300px; height: 200px; border: 1px solid red;display:none">
                                <ul>
                                   
                                </ul>
                            </div>  
                `)
               tag.eq(1).insertAfter($(".pre")); 
            }
        }
   })
}




//评论
function sendping(talk){
    $.ajax({
        url:"http://192.168.1.7:8989/pinglun",
        method:"get",
        data:{
            wenzi:$(talk).prev().val(),
        },
        success:function(res){
            var feet=$(`<li></li>`)
            feet.html(`
             ${res.ops[0].wenzi} 
            `)
            $(talk).parent().next().children().children().prepend(feet);
        }
    
    })
}

///////////////////
function commit(pingf){
    $(pingf).parent().next().toggle();
    $(pingf).parent().next().next().toggle();
    $(pingf).parent().parent().next().children().toggle();
}

//点击聊天室
$(".talkChat").click(function(){
    location.href="http://192.168.1.7:8989/conversation";
})

</script>
</html>